<template>
  <div class="container">
    <headerNav />
    <div class="mincard mindWidth">
      <span @click="$router.push('/')">首页</span>>
      <span>企业测评</span>
    </div>
    <div class="content mindWidth">
      <el-form inline>
        <el-form-item label="测评类型">
          <el-select
            clearable
            filterable
            v-model="search.pathUrl"
            placeholder="请选择"
            @change="changePath"
          >
            <el-option v-for="item in list" :key="item.path" :label="item.text" :value="item.path"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="测评企业">
          <el-input
            @input="handleInput"
            v-model="search.companyName"
            clearable
            style="width:250px"
            placeholder="请输入企业名称"
          />
          <div v-if="companyList.length" class="search-list">
            <p
              @click="toSelect(item)"
              v-for="(item,index) in companyList"
              :key="index"
            >{{item.companyName}}</p>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="onDeclare()">开始测评</el-button>
        </el-form-item>
      </el-form>
      <component :is="copmonent" :ref="copmonent" :companyName="search.companyName" />
    </div>
    <navigation />
    <footerNav />
  </div>
</template>
<script>
import { getCompany } from "../../api/home.js";
import highNew from "./component/HighNew.vue";
import smallNew from "./component/Small.vue";
import science from "./component/Science.vue";
import innovate from "./component/Innovate.vue";
export default {
  components: {
    highNew,
    smallNew,
    science,
    innovate
  },
  data() {
    return {
      list: [
        { text: "创新型中小企业", path: "innovate" },
        { text: "专精特新中小企业", path: "smallNew" },
        { text: "高新技术企业", path: "highNew" },
        { text: "科技型中小企业", path: "science" }
      ],
      search: {
        pathUrl: "",
        companyName: ""
      },
      companyList: [],
      timer: "",
      searchType: 0,
      copmonent: ""
    };
  },
  methods: {
    handleInput(val) {
      this.searchType = 0;
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        // console.log(11111111111111);
        if (val !== "") {
          this.getCompanyList();
        }
      }, 1000);
    },

    getCompanyList() {
      // console.log(11111111111111, this.search.companyName);
      var reg = /^[a-zA-Z]+$/;
      if (reg.test(this.search.companyName)) {
        this.$message({
          type: "warning",
          message: "请输入正确的企业"
        });
        this.search.companyName = "";
        return;
      }
      if (this.searchType === 1) {
        return;
      }
      let params = {
        companyName: this.search.companyName,
        area: "",
        city: "",
        pageIndex: 0,
        pageSize: 10,
        province: ""
      };
      getCompany(params).then(res => {
        if (res.retCode == 0) {
          this.companyList = res.data.content;
          // console.log(this.companyList);
        }
      });
    },
    toSelect(item) {
      this.search.companyName = item.companyName;
      this.companyList = [];
      this.searchType = 1;
    },
    onDeclare() {
      console.log(3333333, this.search.pathUrl);
      this.copmonent = this.search.pathUrl;
      this.$nextTick(() => {
        this.$refs[this.copmonent].getDetail();
      });
    },
    changePath(val) {
      console.log(999999, val);
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .el-form--inline .el-form-item {
  position: relative;
}
.container {
  .mincard {
    span {
      font-size: 14px;
      cursor: pointer;
      margin: 0 10px;
    }
  }
  .content {
    min-height: 550px;
    box-shadow: 0 0 10px #ccc;
    margin: 20px auto 40px auto;
    background: #fff;
    box-sizing: border-box;
    padding: 20px 30px;
    .search-list {
      // height: 100px;
      width: 300px;
      box-shadow: 0 0 10px #ccc;
      overflow-y: auto;
      padding: 10px;
      box-sizing: border-box;
      margin-top: 10px;
      position: absolute;
      background: #ffffff;
      z-index: 999;
      p {
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        &:hover {
          color: #1678ff;
        }
      }
    }
  }
}
</style>